<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/home.css" />
    <link rel="stylesheet" href="css/index.css">
    <link href="css/table.css" rel="stylesheet" type="text/css">
    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/echarts-all.js"></script>
    <script src="js/statistical.js"></script>
    <script>
        $(function(){
            salesProportionMyEcharts();
            profitProportionMyEcharts();
        });
        function salesProportionMyEcharts(){
            var salesProportion = echarts.init($("#salesProportion")[0]);
            var option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:[]
                },

                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data:['化学品','射钉器材','印章','机修','散装加油','典当','烟花爆竹']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'问题处理（件）',
                        type:'bar',
                        barWidth:'30',
                        data:[927, 785, 652, 521, 157, 20, 521, 157, 20],
                        itemStyle: {
                            normal: {
                                color:"#269fec"
                            }
                        }

                    }
                ]
            };
            salesProportion.setOption(option);
        }
        function profitProportionMyEcharts(){
            var profitProportion = echarts.init($("#profitProportion")[0]);
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['已处理','未处理']
                },

                calculable : true,
                series : [
                    {
                        name:'',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {
                                value:86,
                                name:'已处理',
                                itemStyle:{
                                    normal:{
                                        color:""
                                    }
                                }
                            },
                            {
                                value:14,
                                name:'未处理'
                            }

                        ]
                    }
                ]
            };
            profitProportion.setOption(option);
        }
    </script>
    <style>
        .page-list{display: none !important;}
        td{border: 1px #ccc solid !important;}
        .charts span{margin-left: 10px}
        .pagination{margin-right: 10px}
        .pagination-detail{margin-top: 10px !important;}
        .pagination-info{display: none !important;}
        .matter .content .matter-content .matter-list li .matter-time{width: 46px}
        .rows h2,.rows h5{color: #fff ;margin-bottom: 10px}
    </style>
</head>
<body>
<div id="areascontent">
    <div class="article half notice">
        <div class="wrap-l">
            <div class="title ue-clear">
                <h2>通知公告</h2>
                <a href="javascript:;" class="more">更多</a>
            </div>
            <div class="content">
                <ul class="notice-list">
                    <li class="ue-clear">
                        <a href="javascript:;" class="notice-title">针对腐蚀性化学物品新出了相关的管理政策</a>
                        <div class="notice-time">9-18</div>
                    </li>
                    <li class="ue-clear">
                        <a href="javascript:;" class="notice-title">关于公示散装加油的新规定</a>
                        <div class="notice-time">9-18</div>
                    </li>
                    <li class="ue-clear">
                        <a href="javascript:;" class="notice-title">针对腐蚀性化学物品新出了相关的管理政策</a>
                        <div class="notice-time">9-18</div>
                    </li>
                    <li class="ue-clear">
                        <a href="javascript:;" class="notice-title">关于公示散装加油的新规定</a>
                        <div class="notice-time">9-18</div>
                    </li>
                    <li class="ue-clear">
                        <a href="javascript:;" class="notice-title">针对腐蚀性化学物品新出了相关的管理政策</a>
                        <div class="notice-time">9-18</div>
                    </li>
                    <li class="ue-clear">
                        <a href="javascript:;" class="notice-title">关于公示散装加油的新规定</a>
                        <div class="notice-time">9-18</div>
                    </li>
                    <li class="ue-clear">
                        <a href="javascript:;" class="notice-title">针对腐蚀性化学物品新出了相关的管理政策。</a>
                        <div class="notice-time">9-18</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="article half matter" style="margin-top: 0">
        <div class="wrap-r">
            <div class="title ue-clear">
                <h2 class="title-list">
                    <ul class="ue-clear">
                        <li class="current"><a href="javascript:;">待办事项</a></li>
                        <li><a href="javascript:;">已办事项</a></li>
                    </ul>
                </h2>
                <a href="javascript:;" class="more">更多</a>
            </div>
            <div class="content">
                <div class="matter-content current ue-clear">
                    <div class="today">
                        <p class="year">2017年9月</p>
                        <p class="date">19</p>
                    </div>
                    <ul class="matter-list">
                        <li class="ue-clear">
                            <span class="matter-time">9-19</span>
                            <a href="javascript:;" class="matter-title">下午2点召开2017年9月的工作会议</a>
                        </li>
                        <li class="ue-clear">
                            <span class="matter-time">9-19</span>
                            <a href="javascript:;" class="matter-title">上交本年度下月的工作报告提纲</a>
                        </li>
                        <li class="ue-clear">
                            <span class="matter-time">9-19</span>
                            <a href="javascript:;" class="matter-title">参加危险品使用加强的方案会议</a>
                        </li>
                        <li class="ue-clear">
                            <span class="matter-time">9-19</span>
                            <a href="javascript:;" class="matter-title">参加危险品预防措施大会</a>
                        </li>
                        <li class="ue-clear">
                            <span class="matter-time">9-19</span>
                            <a href="javascript:;" class="matter-title">参加市政府举办的互动活动并宣传单位</a>
                        </li>

                    </ul>
                </div>
                <div class="matter-content ue-clear">
                    <div class="today">
                        <p class="year">2017年9月</p>
                        <p class="date">15</p>
                    </div>
                    <ul class="matter-list">
                        <li class="ue-clear">
                            <span class="matter-time">9-15</span>
                            <a href="javascript:;" class="matter-title">参加市政府举办的互动活动并宣传单位</a>
                        </li>
                        <li class="ue-clear">
                            <span class="matter-time">9-15</span>
                            <a href="javascript:;" class="matter-title">参加危险品预防措施大会</a>
                        </li>
                        <li class="ue-clear">
                            <span class="matter-time">9-15</span>
                            <a href="javascript:;" class="matter-title">参加危险品使用加强的方案会议</a>
                        </li>
                        <li class="ue-clear">
                            <span class="matter-time">9-15</span>
                            <a href="javascript:;" class="matter-title">上交本年度下月的工作报告提纲</a>
                        </li>
                        <li class="ue-clear">
                            <span class="matter-time">9-15</span>
                            <a href="javascript:;" class="matter-title">下午2点召开2017年9月的工作会议</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div class="clear"></div>
    <div class="e_chart">
        <div class="charts l_left">
            <p class="charts_p">各行业问题处理情况<span class="r_right"></span></p>
            <div id="salesProportion" style="height:350px;width: 98%"></div>
        </div>
        <div class="charts l_left last_charts">
            <p class="charts_p">问题处理率<span class="r_right"></span></p>
            <div id="profitProportion" style="height:350px;width: 98%"></div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="e_chart">
        <div class="charts charts_last">
            <p class="charts_p">问题处理统计<span class="r_right"></span></p>
            <table id="table" class="table_style" style="margin: 10px auto;width: 98%" > </table>
        </div>
    </div>



</div>
</body>
<script src="js/jquery/jQuery-2.2.0.min.js"></script>
<script src="js/bstable/js/bootstrap.min.js"></script>
<script src="js/bstable/js/bootstrap-table.js"></script>
<script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
    $('#table').bootstrapTable({
        method: "get",
        striped: true,
        singleSelect: false,
        url: "json/home4.json",
        dataType: "json",
        pagination: true, //分页
        pageSize: 8,
        pageNumber: 1,
        search: false, //显示搜索框
        contentType: "application/x-www-form-urlencoded",
        queryParams:null,
        columns: [
            {
                title: "序列号",
                field: 'id',
                align: 'center',
                valign: 'middle'
            },
            {
                title: "问题描述",
                field: 'name',
                align: 'center',
                valign: 'middle'
            },
            {
                title: '问题级别',
                field: 'class',
                align: 'center'
            },
            {
                title: '问题单位',
                field: 'unit',
                align: 'center'
            },
            {
                title: '负责人',
                field: 'person',
                align: 'center'
            },
            {
                title: '处理情况',
                field: 'oper',
                align: 'center'
            },
            {
                title: '处理结果',
                field: 'res',
                align: 'center'
            }
        ]
    });
    $(".title-list ul").on("click","li",function(){
        var aIndex = $(this).index();
        $(this).addClass("current").siblings().removeClass("current");
        $(".matter-content").removeClass("current").eq(aIndex).addClass("current");
    });
</script>
</html>
